<template>
	<view>
		<view class="cu-modal" :class="modalName=='RadioModal'?'show':''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop="">
				<radio-group class="block" @change="RadioChange2">
					<view class="cu-list menu text-left">
						<view class="cu-item">
							<label class="flex justify-between align-center">
								<image src="../../static/UK.png" mode="" style="width: 50rpx;height: 35rpx;"></image>
								<view class=" ">{{i18n.login.english}} </view>
								<radio class="round" style="right: 13px; position: fixed;" :class="radio2== '0'?'checked':''" :checked="radio2== '0'?true:false"
								 :value="'0'"></radio>
							</label>
		
						</view>
						<view class="cu-item">
		
							<label class="flex justify-between align-center">
								<image src="../../static/CH.png" mode="" style="width: 50rpx;height: 35rpx;"></image>
								<view class=" ">{{i18n.login.simplified}} </view>
								<radio class="round" style="right: 13px; position: fixed;" :class="radio2== '1'?'checked':''" :checked="radio2== '1'?true:false"
								 :value="'1'"></radio>
							</label>
						</view>
						<view class="cu-item">
						
							<label class="flex justify-between align-center">
								<image src="../../static/CH.png" mode="" style="width: 50rpx;height: 35rpx;"></image>
								<view class=" ">{{i18n.login.traditional}} </view>
								<radio class="round" style="right: 13px; position: fixed;" :class="radio2== '2'?'checked':''" :checked="radio2== '2'?true:false"
								 :value="'2'"></radio>
							</label>
						</view>
					</view>
				</radio-group>
			</view>
		</view>


		<view class="logo">
			<!-- <image class="bg" src="/static/my_bg.png"></image> -->
			<view style="position: absolute;z-index: 2222222;right: 30px;top: 17px; " @tap="showModal('RadioModal')">
				{{i18n.login.language}}
			</view>
			<view class="img">
				<!-- <image src="/static/logo.png" mode="widthFix"></image> -->
				<image :src="myconfig.logo" mode="aspectFit"></image>
				<!-- <view class="text-center uni-h3 text-bold">{{myconfig.name}}</view> -->
			</view>
		</view>
		<!-- <view class="cu-bar bg-black ">
			<view class="bg-white nav " style="margin: 0 auto;"> 
				<view class="cu-item" :class="1==loginWay?'text-white text-xxl cur':''" @tap="tabSelect" data-id="1">
					验证码登陆
				</view>
				<view class="cu-item" :class="0==loginWay?'text-white text-xxl cur':''" @tap="tabSelect" data-id="0">
					密码登陆
				</view>
			 
			</view>
		</view> -->
		<!-- 账号密码输入框 -->
		<view class="form re">
			<!-- <view class="username" v-if="loginWay==1">
				<view class="get-code" :style="{'color':getCodeBtnColor}" @click.stop="getCode()">{{getCodeText}}</view>
				<input type="number" placeholder="请输入手机号" v-model="mobile" placeholder-style="color: rgba(255,255,255,0.8);" />
			</view>
			<view class="code" v-if="loginWay==1">
				<input type="text" placeholder="请输入验证码" v-model="code" placeholder-style="color: rgba(255,255,255,0.8);" />
			</view> -->
			<view class="username" v-if="loginWay==0">
				<input :placeholder="i18n.login.inputUserName" v-model="username" />
			</view>
			<view class="password" v-if="loginWay==0">
				<input :placeholder="i18n.login.password" v-model="password" password=true />
			</view>
			<view style="padding: 0px 10px 15px 10px;">
				<move-verify @result='verifyResult' ref="verifyElement"></move-verify>
			</view>

			<button class="btn " @tap="toLogin" :disabled="logining">{{i18n.login.login}}</button>
			<view class="thrid">
				<!-- 第三方登录 -->
				<!-- #ifdef H5 -->
				<!-- <button @click="vendorLogin('WxH5')" class="btn">微信登录</button> -->
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<!-- <button type="primary" class="btn" open-type="getUserInfo" @getuserinfo="onGotUserInfo">微信登录</button> -->
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<!-- <button type="primary" class="btn" @click="vendorLogin('App5')">微信登录</button> -->
				<!-- #endif -->
			</view>
			<view class="res">
				<view @tap="toRegist()">{{i18n.login.registration}}</view>
				<!-- <view @tap="toReset()">{{i18n.login.forget}}</view> -->
				<!-- <view @tap="down()">下载app</view> -->
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	import Account from '../../common/account/Account.js'
	import moveVerify from "@/components/helang-moveVerify/helang-moveVerify.vue"

	export default {
		components: {
			"move-verify": moveVerify
		},
		data() {
			return {
				username: '',
				password: '',
				referer: null,
				loginWay: 0,
				mobile: '',
				code: '',
				logining: true,
				getCodeText: '获取验证码',
				getCodeBtnColor: "#ffffff",
				getCodeisWaiting: false,
				// #ifdef H5
				loginCode: '',
				// #endif
				radio2: '',
				modalName: null,
				resultData: {}
			}
		},
		computed: {
			...mapState({
				myconfig: state => state.user.myconfig
			}),
			i18n() {
				return this.$t('message');
			}
		},
		onLoad(option) {
			this.referer = option.referer ? option.referer : null
			// #ifdef H5
			if (option.token) {
				uni.setStorageSync('token', option.token)
				this.getUserinfo()
				this.goReferer()
			}
			// #endif
		},
		methods: {
			...mapActions(['login', 'getCartProducts', 'getUserinfo']),
			onBackPress(e) {
				// 这里可以自定义返回逻辑，比如下面跳转其他页面 
				uni.switchTab({
					url: '/pages/index/index'
				})
				// return true 表示禁止默认返回
				return true
			},
			inputChange(e) {
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
			},
			/* 校验成功的回调函数 */
			verifyResult(res) {
				console.log(res);
				this.resultData = res;
				this.logining = !res.flag
			},
			/* 校验插件重置 */
			verifyReset() {
				this.$refs.verifyElement.reset();

				/* 删除当前页面的数据 */
				this.resultData = {};
			},
			setLoginWay(val) {
				this.loginWay = val
			},
			Timer() {},
			getCode() {
				uni.hideKeyboard()
				if (this.getCodeisWaiting) {
					return;
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.mobile))) {
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}
				this.getCodeText = "发送中..."
				this.getCodeisWaiting = true;
				this.getCodeBtnColor = "rgba(255,255,255,0.5)"

				this.$http.post('index.code.get', {
					mobile: this.mobile,
					event: 'login'
				}).then(res => {
					console.log(res);
					uni.showToast({
						title: '验证码已发送',
						icon: "none"
					});
					this.setTimer();
				}).catch(e => {
					this.setTimer();
				})
			},
			setTimer() {
				let holdTime = 60;
				this.getCodeText = "重新获取(60)"
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "#ffffff";
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer);
						return;
					}
					this.getCodeText = "重新获取(" + holdTime + ")"
					holdTime--;

				}, 1000)
			},
			navBack() {
				uni.navigateBack();
			},
			toRegist() {
				uni.navigateTo({
					url: "/pages/public/registe"
				})
			},
			toReset() {
				uni.navigateTo({
					url: "/pages/public/resetpasswd"
				})
			},
			down() {
				uni.navigateTo({
					url: "/pages/public/down"
				})
			},
			toCenter() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			navTo(url) {
				// if(!this.userinfo.id){
				// 	url = '/pages/public/login';
				// }
				uni.navigateTo({
					url
				})
			},
			tabSelect(e) {
				this.loginWay = e.currentTarget.dataset.id;
			},
			actionSheetTap() {
				uni.showActionSheet({
					title: this.i18n.login.language,
					itemList: [this.i18n.login.english, this.i18n.login.simplified],
					success: (e) => {
						console.log(e.tapIndex);
						let lang = ['en-US', 'zh-CN'];
						this._i18n.locale = lang[e.tapIndex];

					}
				})
			},
			showModal(name) {
				this.modalName = name
			},
			hideModal(e) {
				this.modalName = null
			},
			RadioChange2(e) {
				console.log(e.detail.value)
				let lang = ['en-US', 'zh-CN', 'zh-HK'];
				this._i18n.locale = lang[e.detail.value];
				// this.tablang();
				this.radio2 = e.detail.value;
				this.modalName = null
			},
			async toLogin() {
				this.logining = true;
				let sendData = {}
				if (this.loginWay == 0) {
					const {
						username,
						password
					} = this
					sendData = {
						username,
						password,
						loginWay: this.loginWay
					}
				} else if (this.loginWay == 1) {
					const {
						mobile,
						code
					} = this
					sendData = {
						mobile,
						code,
						loginWay: this.loginWay
					}
				}
				this.login(sendData).then(res => {
					this.logining = false
					this.getCartProducts()
					this.goReferer()
				}).catch(e => {
					this.logining = false
				})
			},
			async vendorLogin(code, data) {
				let account = Account.init(code)
				switch (code) {
					case 'WxH5':
						{
							let url = '/addons/xshop/vendor/getAuthUrl?vendor=WxH5'
							if (!!this.referer) url += '&payload[referer]=' + encodeURIComponent(this.referer)
							window.location.href = url
							break;
						}
					case 'WechatMp':
						{
							let res = await account.login(data)
							uni.setStorageSync('token', res.data.token)
							this.getUserinfo()
							this.goReferer()
							break;
						}
					case 'App5':
						{
							account.login(data, res => {
								uni.setStorageSync('token', res.data.token)
								this.getUserinfo()
								this.goReferer()
							}, e => {})
							break;
						}
				}
			},
			goReferer() {
				if (this.referer) {
					uni.reLaunch({
						url: decodeURIComponent(this.referer),
						fail: this.toCenter(),
					})
				} else {
					this.toCenter()
				}
			},
			onGotUserInfo: function(e) {
				let detail = e.detail
				let data = {
					encryptedData: detail.encryptedData,
					iv: detail.iv,
					rawData: detail.iv
				}
				this.vendorLogin('WechatMp', data)
			}
		},

	}
</script>

<style lang="scss">
	@import "../../static/css/login.scss";

	// .form {
	// 	.res {
	// 		display: flex;
	// 		justify-content: space-between;
	// 		align-items: center;
	// 		height: 100upx;
	// 		color: rgba($color: #ffffff, $alpha: 0.8);
	// 	}
	// }

	.oauth {
		@media all and (max-height: 150vw) {
			display: none;
		}

		position: absolute;
		bottom: 50upx;
		width: 100%;

		.text {
			width: 100%;
			height: 60upx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: rgba($color: #ffffff, $alpha: 0.8);
			font-size: 28upx;
		}

		.list {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20upx 0;

			.icon {
				font-size: 80upx;
				margin: 0 30upx;
			}
		}
	}

	.thrid {
		margin-top: 20rpx;
	}

	.nav .cu-item.cur {
		border-bottom: 0px;
	}

	.nav .cu-item {
		padding: 0 20px;
	}
</style>
